<!--




工作流申请页面





-->

<template>
  <div>
    <a-divider>流程进度</a-divider>

    <!-- 审批工作流 -->
    <div style="margin-top: 40px">
      <a-form-model v-bind="layout" v-model="form">
        <center>
          <a-row>
            <a-col :md="2"></a-col>
            <a-col :md="16" :sm="24">
              <a-form-model-item label="当前步骤">
                <a-input placeholder="拟稿" disabled style="top: -5px" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="2"></a-col>
            <a-col :md="16" :sm="24">
              <a-form-model-item label="请选择下一步">
                <a-select v-model="form.next_step" :mode="next_step_type">
                  <a-select-option
                    v-for="(item, index) in next_step_array"
                    :key="index"
                    >{{ item }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :md="2"></a-col>
            <a-col :md="16" :sm="24">
              <a-form-model-item label="下一步办理人">
                <a-select
                  v-model="form.ASSIGNEE_"
                  @change="onChange"
                  :mode="next_step_type"
                >
                  <a-select-option
                    v-for="index in ASSIGNEE_array"
                    :key="index.userId"
                    :value="index.userName"
                    >{{ index.userName }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="2"></a-col>
            <a-col :md="16" :sm="24">
              <a-form-model-item label="消息提醒">
                <a-input placeholder="是" disabled style="top: -5px" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </center>
        <a-row>
          <center>
            <a-button type="primary" @click="onSubmit()">发送</a-button>
            <!-- <a-button style="margin-left: 20px;" @click="SubmitDraft()">暂存为草稿</a-button> -->
            <a-button style="margin-left: 20px" @click="reset_form()"
              >重置</a-button
            >
          </center>
        </a-row>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { workflowHttp } from "@/services/modules/workFlow";
const wfHttp = new workflowHttp(); // 公用接口

export default {
  data() {
    return {
      // 表单搜索布局
      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 14 },
      },

      form: {
        ASSIGNEE_: undefined, // 受理人
        next_step: undefined, // 下一步
      },

      next_step_array: [], // 下一步数组
      next_step_type: "", // 下一步按钮类型 单选或者多选
      ASSIGNEE_array: [], // 办理人数组
      queryPath: "",

      ASSIGNEE_Key: [], // 办理人key值,包含所有的唯一的key值
    };
  },

  props: {
    // 任务名称
    duty_name: {
      type: String,
      required: true,
    },
  },

  methods: {
    // 根据任务名称,获取流程数据
    getProcessName() {
      console.log("任务名称为：：：：", this.duty_name);
      let queryPath = "?name=" + this.duty_name; // 任务名称
      wfHttp.getProcessstepByFlowName(queryPath).then((res) => {
        console.log("该流程返回的数据包含了：：：：：", res);

        this.next_step_array = [];
        this.ASSIGNEE_array = [];
        this.ASSIGNEE_Key = [];

        // 控制单选或者多选
        if (res.result.actTaskRoleVoList.length == 1) {
          this.next_step_type = "default";
        } else {
          this.next_step_type = "multiple";
          // this.next_step_type = "multiple";
        }

        //下一步办理人
        for (let i = 0; i < res.result.actTaskRoleVoList.length; i++) {
          // console.log(res.result.actTaskRoleVoList[i].taskName);
          this.next_step_array.push(res.result.actTaskRoleVoList[i].taskName); // 下一步流程信息放进下一步数组

          let keysArray = Object.keys(
            res.result.actTaskRoleVoList[i].userNameAndId
          );
          console.log("获取所有用户id:::::", keysArray);

          for (let j = 0; j < keysArray.length; j++) {
            // 包含 key 值
            // console.log(keysArray[j]);
            // console.log(this.ASSIGNEE_Key.indexOf(keysArray[j]) == -1);

            if (this.ASSIGNEE_Key.indexOf(keysArray[j]) == -1) {
              let data = {
                userId: keysArray[j],
                userName:
                  res.result.actTaskRoleVoList[i].userNameAndId[keysArray[j]],
              };
              // console.log("用户数据::::", data);
              this.ASSIGNEE_array.push(data);
              this.ASSIGNEE_Key.push(keysArray[j]);
            }
          }
        }
        console.log("下一步任务数组", this.next_step_array);
        console.log("办理人数组", this.ASSIGNEE_array);
      });
    },

    // 选择下一步办理人触发事件
    onChange(value, options) {
      console.log(value, options);
      // 构造传参路径,
      if (typeof value == "string") {
        // 单选情况下，下一步办理人
        this.queryPath = "?ASSIGNEE_=" + options.key;
      } else {
        // 多选情况下,下一步办理人
        for (let i = 0; i < options.length; i++) {
          let userIdArray = [];
          userIdArray.push(options[i].key);

          if (i == 0) {
            this.queryPath =
              "?assignees" + String.fromCharCode(97 + i) + "=" + options[0].key;
          } else {
            this.queryPath =
              this.queryPath +
              "&assignees" +
              String.fromCharCode(97 + i) +
              "=" +
              options[i].key;
          }
        }
      }
      console.log("拼接好的查询路径", this.queryPath);
    },

    // 点击提交时，把子组件上的数据，传递到父组件
    onSubmit() {
      // console.log("下一步办理人::::",this.form.ASSIGNEE_)
      if (typeof this.form.next_step == "undefined") {
        this.$message.error("请选择下一步不能为空");
      } else if (typeof this.form.ASSIGNEE_ == "undefined") {
        this.$message.error("下一步办理人不能为空");
      } else {
        console.log("办理人数据::::", this.queryPath);

        this.$emit("submit-assignee", this.queryPath);
      }
    },
    // 重置方法
    reset_form() {
      this.ResetASSIGNEE();
      this.$emit("reset-form");
    },
    // 重置表单
    ResetASSIGNEE() {
      this.form.ASSIGNEE_ = "";
      this.form.next_step = "";
    },
  },
};
</script>

<style></style>
